<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="cate">
    <van-nav-bar
    title="分类"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
    />
    <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
        <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>
    <van-card
    v-for="item in filterPersons"
    :key="item.tid"
    :num="item.xs_number"
    :price="item.price"
    :desc="item.tintro"
    :title="item.tname"
    :thumb="baseurl+item.timg"
    />
  </div>
</template>

<script>
export default {
  data () {
    return {
      catelist: [],
      baseurl: '',
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 }
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' }
      ]
    }
  },

  // 接收父组件传递过来的参数
  props: {},

  components: {},

  // computed是计算属性，也就是依赖其它的属性计算所得出最后的值
  computed: {
    filterPersons () {
      const { catelist, value2 } = this
      const cate = catelist.filter(p => p.tname)
      switch (value2) {
        case 'a':
          return catelist
        case 'b':
          return cate.sort((a, b) => a.xs_number - b.xs_number)
        case 'c':
          return cate.sort((a, b) => a.price - b.price)
      }
      return catelist
    }
  },

  // 页面初始化方法
  mounted () {
    this.getCate()
  },

  // 监听方法 click事件等 ，执行drawFeatures方法
  methods: {
    getCate () {
      this.$api.Cate(this.$route.query).then(res => {
        if (res.data.code === 200) {
          this.catelist = res.data.msg
          this.baseurl = res.data.baseurl
        }
      })
    },
    onClickLeft () {
      this.$router.go(-1)
    }
  }
}

</script>
<style lang='less' scoped>
.cate{
    height: 100vh;
    background-color: #fafafa;
}
/deep/.van-nav-bar .van-icon{
    color: #a7cd6d;
}
/deep/.van-nav-bar__text{
    color: #a7cd6d;
}
</style>
